import { NAvatar, NButton, NPopconfirm, NTag } from 'naive-ui'
import { deleteGoods } from '@/service/api/product'

const operationList = (config, row) => {
  const { handleEdit, onDeleted, handleSpecification } = config

  const handleDelete = async (id) => {
    const { data } = await deleteGoods({ ids: [id] })
    if (data) {
      onDeleted()
    }
  }

  return [
    {
      label: '修改',
      type: 'info',
      size: 'tiny',
      click: () => handleEdit(row.id),
    },
    {
      label: '商品规格',
      type: 'error',
      size: 'tiny',
      click: () => handleSpecification(row.id, true),
    },
    {
      label: '设置轮播图',
      type: 'error',
      size: 'tiny',
    },
    {
      label: '商品详情',
      type: 'error',
      size: 'tiny',
    },
    {
      label: '删除',
      type: 'info',
      size: 'tiny',
      click: () => handleDelete(row.id),
    },
  ]
}

export const getColumns = (config) => {
  return [
    {
      type: 'selection',
      width: 60,
    },
    {
      title: '商品',
      key: 'name',
      render: (row) => {
        return (
          <div class="flex">
            <NAvatar size="large" src={row.cover} />
            <div class="ml-2 mt-0">
              <p>{row.title}</p>
              <p>
                <span class="text-red-500">￥{row.min_price}</span>
                <span class="mx-1">|</span>
                <span class="text-gray-500">￥{row.min_oprice}</span>
              </p>
              <p class="text-sm text-gray-500">
                分类: {row.category && row.category.name ? row.category.name : '未归类'}
              </p>
              <p class="text-sm text-gray-500">创建时间:{row.create_time}</p>
            </div>
          </div>
        )
      },
      width: 150,
    },
    {
      title: '实际销量',
      key: 'sale_count',
      width: 70,
      titleAlign: 'center',
      align: 'center',
    },
    {
      title: '商品状态',
      key: 'status',
      render: (row) => {
        return row.status === 1 ? (
          <NTag size="small" type="success">
            上架
          </NTag>
        ) : (
          <NTag size="small" type="error">
            仓库
          </NTag>
        )
      },
      width: 70,
      titleAlign: 'center',
      align: 'center',
    },
    {
      title: '审核状态',
      key: 'ischeck',
      render: (row) => {
        let tag
        if (row.ischeck === 0) {
          tag = (
            <NTag size="small" type="warning">
              待审核
            </NTag>
          )
        } else if (row.ischeck === 1) {
          tag = '通过'
        } else if (row.ischeck === 2) {
          tag = '拒绝'
        }
        return tag
      },
      width: 70,
      titleAlign: 'center',
      align: 'center',
    },
    {
      title: '总库存',
      key: 'stock',
      width: 70,
      titleAlign: 'center',
      align: 'center',
    },
    {
      title: '操作',
      key: 'operation',
      width: 150,
      titleAlign: 'center',
      align: 'center',
      render: (row) => {
        return (
          <div class="flex justify-center">
            {operationList(config.value, row).map(({ label, type, size, click }) => {
              return (
                <div>
                  {label === '删除' ? (
                    <NPopconfirm onPositiveClick={click}>
                      {{
                        default: () => '是否要删除该商品？',
                        trigger: () => {
                          return (
                            <NButton quaternary size={size} type={type}>
                              {label}
                            </NButton>
                          )
                        },
                      }}
                    </NPopconfirm>
                  ) : (
                    <NButton quaternary size={size} type={type} onClick={click}>
                      {label}
                    </NButton>
                  )}
                </div>
              )
            })}
          </div>
        )
      },
    },
  ]
}

export const formatOptions = (data = {}) => {
  const { cates = [] } = data

  return cates.map(({ name, id }) => {
    return {
      label: name,
      value: id,
    }
  })
}

export const createDefaultModel = () => {
  return {
    id: null,
    title: null,
    category_id: null,
    cover: null,
    desc: null,
    unit: null,
    stock: null,
    min_stock: null,
    min_oprice: null,
    min_price: null,
    status: null,
    stock_display: null,
    content: null,
  }
}

export const inventoryDisplayGroup = [
  {
    value: 0,
    label: '放入仓库',
  },
  {
    value: 1,
    label: '立即上架',
  },
]

export const listingGroup = [
  {
    value: 0,
    label: '隐藏',
  },
  {
    value: 1,
    label: '显示',
  },
]
